<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/reset.css" />
		<style>
			body{
				background-color: #faf5cd;
			}
			.news-wrapp{
				width: 300px;
				margin: 50px auto;
				border-top: 1px solid #dddddd;
				background-color: #FFFFFF;
			}
			.news-title{

				height: 52px;
			
				
			}
			/*将a 转成行内块元素为其设置宽高，并且不独占一行*/
			.news-title a{
				color: #595b59;
				text-decoration: none;
				display: inline-block;
				padding-top:16px;
				font-weight: 700;
				border-top: 1px solid red;
			}
			.news-title a:hover{
				color:red;
			}
			.news-img {
				height: 150px;
				margin-bottom: 25px;
				
			}
			.news-img h3{
				color: #ffffff;
				font-weight: 700;
				margin-top: -30px;
				margin-left: 50px;
			}
			.news-list li a{
				text-decoration: none;
				
			}
			.news-list li{
				padding-bottom: 20px;
			}
			.news-list li a{
				font-size: 14px;
				color: #666;
				
			}
			/*通过before伪元素，来为每一个li添加项目符号*/
			.news-list li::before{
				content:'■';
				font-size: 12px;
				color: #ddd;
				margin-right: 5px;
				
			}
		</style>
	</head>
	<body>
		<div class="news-wrapp">
			<div class="news-title">
				<h2><a href="javascript:;">财经</a></h2>
				
			</div>
		
			<div class="news-img">
				<img src="./img/1.webp" alt="" />
				<h3>深圳疯传二手房交易流程调整</h3>
			</div>
			<ul class="news-list">
				<li>
					<a href="javascript:;">美股强势反弹！标普创近四个月最大涨幅</a>
				</li>
				<li>
					<a href="javascript:;">65折售房！上市公司称：内部员工购房福利</a>
				</li>
				<li>
					<a href="javascript:;">这款间谍软件被曝光！5万个电话号码被监控</a>
				</li>
				<li>
					<a href="javascript:;">三孩配套政策正式发布：取消社会抚养费！</a>
				</li>
			</ul>
		</div>
	</body>
</html>
